<template>
<div class="support-style">
    <div class="support">
     <p class="support-plan">活动总需筹{{supportMessage.allMoney}}元，目前已经筹集{{supportMessage.nowMoney}}元</p>
     <div class="support-money">
         <h5>支持金额</h5>
        <ul @click="selected" class="mui-table-view mui-table-view-radio clear-fix">
            <li class="mui-table-view-cell mui-selected">
              <a class="mui-navigate-right">68元</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">108元</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">158元</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">198元</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">520元</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">999元</a>
            </li>
            <li class="mui-table-view-cell">
              <input @input="restChange" value="" type="tel" placeholder="其他">
            </li>
          </ul>
          <p v-if="payHint">该用户还差200元众筹成功，支持金额不能超过200元</p>
     </div>
     <div class="conment">
       <textarea v-model="text" placeholder="对他（她）说一句话，字数不超过100字（选填）"></textarea>
     </div>
  </div>
   <div class="pay-select">
       <div class="clear-fix">
          <img src="../assets/微信支付@3x.png" alt="">
          <span>微信支付</span>
          <div>
            <img src="../assets/选中@3x.png" alt="">
          </div>
        </div>
     </div>
     <!-- 支付按钮 -->
     <pay :activeUserId="this.activeId" :money="seleteMoney" :activeIdPay="activeId" :payStatus="1" :supportData="supportMessage" :commentContentData="text"></pay>
</div>
</template>

<script>
import pay from './sub_comonents/pay'
export default {
    data() {
        return {
            payHint: false, //差额提示
            rest: '', //其他金额
            seleteMoney: 68, //支付金额
            activeId: '', //活动id
            activeDetails: {}, //活动信息
            supportMessage:{},//当前用户支持信息
            text:'',
        }
    },
    created() {
        this.activeId = this.$route.params.activeId.split(',')
        // 获取活动信息
        this.utils.$get(
            this.utils.GET_CHIPS_DETAILS,
            data => {
                this.activeDetails = data.data || {}
            },
            { id: this.activeId[1] }
        )
        this.getSupport()
    },
    components: {
        pay
    },
    methods: {
        // 获取支持详情
        getSupport() {
            this.utils.$get(
                this.utils.GET_SUPPOIRT_DETAILS,
                data => {
                    this.supportMessage = data.data ||  this.supportMessage
                },
                { userId: this.activeId[0], activityId: this.activeId[1] }
            )
        },
        // 选择金额
        selected(e) {
            this.seleteMoney = e.target.text || e.target.value || 0
        },
        //   输入金额
        restChange(e) {
            // if (!/^[1-9]\d{0,7}$/.test(e.target.value)) {
            //     this.$set(e.target, 'value', '')
            //     this.seleteMoney = 0
            // }
            this.seleteMoney = e.target.value || 0
        },
        // 支付
        clickPay() {
            this.$router.push({ path: '/success_hint' })
        }
    }
}
</script>



<style lang="less">
.support {
    padding: 0 0.24rem;
    .support-plan {
        font-size: 0.3rem;
        color: #333;
        padding: 0.4rem 0;
    }
    .support-money {
        > h5 {
            color: #ccc;
            margin-bottom: 0.2rem;
        }
        .mui-table-view {
            &::before {
                position: relative;
                height: 0;
            }
            &::after {
                position: relative;
            }
            .mui-table-view-cell {
                width: 2.1rem;
                height: 0.8rem;
                border: none;
                border: 1px solid #ccc;
                border-radius: 0.08rem;
                margin-left: 0.3rem;
                float: left;
                vertical-align: middle;
                // display: flex;
                line-height: 0.76rem;
                padding: 0!important;
                margin-bottom: 0.3rem;
                &:nth-child(3n + 1) {
                    margin-left: 0;
                }
                &:last-child {
                    margin-left: 0;
                    width: 100%;
                    height: 0.8rem;
                    > input {
                        width: 100%;
                        height: 100%;
                        border: none;
                        text-align: center;
                        color: #333;
                        font-size: 0.28rem;
                    }
                }
                &::after {
                    height: 0;
                }
                .mui-navigate-right {
                    
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    margin: 0;
                    display: block;
                    text-align: center;
                    &::after {
                        content: '';
                        width: 0;
                        height: 0;
                    }
                }
                .mui-active {
                    background-color: #fff;
                    color: #00d8c9;
                }
            }
            .mui-selected {
                border: 1px solid #00d8c9;
                color: #00d8c9;
                padding: 0;
            }
        }
        > p {
            color: #f93a3a;
            font-size: 0.24rem;
            padding-bottom: 0.6rem;
        }
    }
    .conment {
        padding: 0.4rem 0;
        > textarea {
            height: 2.4rem;
            font-size: 0.28rem;
            background-color: #f9f9f9;
            border: none;
            padding: 0.3rem 0.2rem;
        }
    }
}
.pay-select {
    background-color: #f9f9f9;
    padding: 0.2rem 0 0.3rem;
    > div {
        background-color: #fff;
        height: 0.88rem;
        padding: 0.18rem 0.24rem;
        > img {
            width: 0.52rem;
            height: 0.52rem;
            float: left;
        }
        > span {
            display: inline-block;
            line-height: 0.52rem;
            margin-left: 0.2rem;
        }
        > div {
            float: right;
            width: 0.42rem;
            height: 0.42rem;
            > img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
.pay {
    padding-left: 0.24rem;
    height: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    > span {
        display: inline-block;
        line-height: 1rem;
        &:nth-child(2) {
            color: #f93a3a;
            font-weight: 600;
            font-size: 0.36rem;
        }
    }
    > button {
        float: right;
        width: 3.2rem;
        height: 100%;
        background-color: #00d8c9;
        text-align: center;
        font-size: 0.36rem;
        color: #fff;
    }
}
</style>

